<template>
  <div>
    <el-tabs type="border-card" @tab-click="tabClick">
      <el-tab-pane
        :label="type.Description"
        v-for="type in types"
        :key="type.EnumValue"
      >
        <div class="header">
          <span style="margin-left: 20px">关键字</span>
          <el-input
            placeholder="请输入关键字"
            v-model="req.keyword"
            style="width: 200px; margin-left: 10px"
            clearable
          ></el-input>
          <el-button
            type="text"
            style="margin-left: 20px"
            size="small"
            @click="getContributionProjects()"
          >
            搜索
          </el-button>
          <el-button
            type="text"
            style="margin-left: 20px"
            size="small"
            @click="addVis = true"
          >
            新增
          </el-button>
        </div>
        <el-form
          style="overflow: auto; margin: 30px; height: 60vh"
          label-width="180px"
          label-position="left"
        >
          <el-form-item
            v-for="item in projects"
            :label="item.CP_Name"
            :key="item.CP_ID"
          >
            <div style="display: flex; align-items: center">
              <el-slider
                style="width: 400px"
                v-model="item.CP_Weight"
                :min="0"
                :max="100"
                @change="changeContributionProject(item)"
              ></el-slider>
              <span style="margin-left: 10px">
                {{ item.CP_Weight }}
              </span>
              <i
                class="el-icon-edit"
                style="margin-left: 10px"
                @click="
                  curProject = item
                  editVis = true
                "
              ></i>
              <i
                class="el-icon-delete"
                style="margin-left: 10px"
                @click="deleteContributionProject(item.CP_ID)"
              ></i>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>

    <el-drawer title="新增" :visible.sync="addVis" direction="rtl">
      <el-form label-width="100px" style="margin-top: 20px; width: 80%">
        <el-form-item label="任务名称">
          <el-input v-model="newProject.CP_Name"></el-input>
        </el-form-item>
        <el-form-item label="工作期限">
          <div style="display: flex; align-items: center">
            <el-slider
              style="width: 400px"
              v-model="newProject.CP_Weight"
              :min="0"
              :max="100"
            ></el-slider>
            <span style="margin-left: 10px">
              {{ newProject.CP_Weight }}
            </span>
          </div>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            v-model="newProject.CP_Remark"
            rows="3"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="addContributionProject()">
            新增
          </el-button>
          <el-button type="text" @click="addVis = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <el-drawer title="保存" :visible.sync="editVis" direction="rtl">
      <el-form
        label-width="100px"
        style="margin-top: 20px; width: 80%"
        v-if="curProject"
      >
        <el-form-item label="任务名称">
          <el-input v-model="curProject.CP_Name"></el-input>
        </el-form-item>
        <el-form-item label="工作期限">
          <div style="display: flex; align-items: center">
            <el-slider
              style="width: 400px"
              v-model="curProject.CP_Weight"
              :min="0"
              :max="100"
            ></el-slider>
            <span style="margin-left: 10px">
              {{ curProject.CP_Weight }}
            </span>
          </div>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            v-model="curProject.CP_Remark"
            rows="3"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="editContributionProject()">
            保存
          </el-button>
          <el-button type="text" @click="addVis = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>
<script>
import {
  getContributionProjects,
  getCaseEmployeeTypes,
  addContributionProject,
  editContributionProject,
  deleteContributionProject,
} from '@/api/core/contributionProject'
export default {
  data: function () {
    return {
      types: [],
      curType: null,
      req: {
        type: null,
        keyword: '',
      },
      newProject: {},
      curProject: null,
      projects: [],
      addVis: false,
      editVis: false,
    }
  },
  methods: {
    tabClick(val) {
      this.curType = this.types.find((x) => x.Description == val.label)
      this.getContributionProjects()
    },
    getCaseEmployeeTypes() {
      getCaseEmployeeTypes().then(({ data }) => {
        this.types = data
        this.curType = this.types[0]
        this.getContributionProjects()
      })
    },
    getContributionProjects() {
      this.req.type = this.curType.EnumValue
      getContributionProjects(this.req).then(({ data }) => {
        this.projects = data
      })
    },
    addContributionProject() {
      this.newProject.CP_EmployeeType = this.curType.EnumValue
      addContributionProject(this.newProject).then(() => {
        this.getContributionProjects()
        this.addVis = false
        this.newProject = {}
      })
    },
    editContributionProject() {
      editContributionProject(this.curProject).then(() => {
        this.getContributionProjects()
        this.editVis = false
      })
    },
    changeContributionProject(item) {
      editContributionProject(item).then(() => {
        this.getContributionProjects()
      })
    },
    deleteContributionProject(id) {
      this.$confirm(`确认删除？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteContributionProject(id).then(() => {
          this.getContributionProjects()
        })
      })
    },
  },
  mounted() {
    this.getCaseEmployeeTypes()
  },
}
</script>

<style scoped>
.header {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  background: #ffffff;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
}
.main {
  height: calc(100% - 130px);
  padding: 10px;
}
.el-table::before {
  z-index: inherit;
}
</style>